{% extends "base-no-sidebar.html" %}

{% block css%}    
<link href="/static/css/morris/morris.css" rel="stylesheet" type="text/css" />    
{% endblock %}

{% block js%} 
<script src="/static/js/plugins/raphael-min.js"></script>
<script src="/static/js/plugins/morris/morris.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

{% for sensor in sensors %}
    {% if sensor.sensor_class == 's' %}
        switch_refresh({{sensor.id}});
    {% endif %}
    {% if sensor.sensor_class == 'n' %}
        curvet_refresh({{sensor.id}}, '{{sensor.unit}}');
    {% endif %}
    {% if sensor.sensor_class == 'p' %}
        img_refresh({{sensor.id}});
    {% endif %}
{% endfor %}

})



function switch_refresh(get_id){
    $.getJSON("/API/sensor/" + get_id + '/datapoint/get/',  {}, 
        function(data){
            if(data['msg'] != 'ok') {
                alert('failed');
            } else {
                if(data['value'] == 1) {
                    $("#btn-close" + get_id).attr('class', 'btn btn-default btn-lg');
                    $("#btn-open" + get_id).attr('class', 'btn btn-primary btn-lg active');  
                } else {
                    $("#btn-close" + get_id).attr('class', 'btn btn-primary btn-lg active');
                    $("#btn-open" + get_id).attr('class', 'btn btn-default btn-lg');                                          
                }
                    
            }               
    });  
}
function switch_open(get_id){
    $("#btn-close" + get_id).attr('class', 'btn btn-default btn-lg');
    $("#btn-open" + get_id).attr('class', 'btn btn-primary btn-lg active');    
    $.getJSON("/API/sensor/" + get_id + '/datapoint' ,  {value : 1}, 
        function(data){
            if(data['msg'] != 'ok') {
                alert('failed');
            }                
    });
}
function switch_close(get_id){
    $("#btn-close" + get_id).attr('class', 'btn btn-primary btn-lg active');
    $("#btn-open" + get_id).attr('class', 'btn btn-default btn-lg'); 
    $.getJSON("/API/sensor/" + get_id + '/datapoint' ,  {value : 0}, 
        function(data){
            if(data['msg'] != 'ok') {
                alert('failed');
            }                 
    });  
}
function curvet_refresh(get_id, unit){
    $.getJSON("/API/sensor/" + get_id + '/datapoint/history/',  {}, 
        function(data2){
            if(data2['msg'] != 'ok') {
                alert('failed');
            } else {
                var area = new Morris.Area({
                    element: "revenue-chart-" + get_id,
                    resize: true,
                    data: data2['datapoint'],
                    xkey: 'key',
                    ykeys: ['value'],
                    labels: ['value'],
                    // xLabels: [''],
                    postUnits : unit,
                    lineColors: ['#3c8dbc'],
                    hideHover: 'auto'
                });                              
            }               
    });                     
}
function img_refresh(get_id){
    $.getJSON("/API/sensor/" + get_id + '/datapoint/history/',  {}, 
        function(data){
            if(data['msg'] != 'ok') {
                // alert('failed');
            } else {
                for(var n=0; n < data['datapoint'].length; n++){
                    var content;
                    if(n == 0) {
                        content = '<div class="item active">'                        
                    }
                    else{
                        content = '<div class="item">'                             
                    }                  
                    content += '<center><img src="' + data['datapoint'][n]['value'] + '"></center>\
                                <div class="carousel-caption">\
                                    <h4 style="color:#fff;">Time</h4>\
                                    <p style="color:#fff;">' + data['datapoint'][n]['key'] + '</p> \
                                </div>\
                              </div>' 
                    $('.carousel-inner[sensor_id=' + get_id + ']').append(content);   
                }                                
            }               
    });                           
}
</script>   
{% endblock %}

{% block on_ready%}    
{% endblock %}

{% block content %} 

<p><b>Name:</b>{{device_instance.name}}</p>
<p><b>Describe:</b>{{device_instance.describe}}</p>
<p><b>Location:</b>{{device_instance.location}}</p>

{% for sensor in sensors %}  
<div class="callout callout-info">
    
    {% if sensor.sensor_class == 's' %}
    <p><b>Name:</b>{{sensor.name}}</p>
    <div class="btn-group" data-toggle="btn-toggle">
        <button id="btn-open{{sensor.id}}" style="height:100px;width:180px;" type="button" class="btn btn-default btn-lg" onclick="switch_open({{sensor.id}})"><span class="glyphicon glyphicon-play"></span></button>
        <button id="btn-close{{sensor.id}}" style="height:100px;width:180px;" type="button" class="btn btn-primary btn-lg active" onclick="switch_close({{sensor.id}})"><span class="glyphicon glyphicon-pause"></span></button>
    </div>
    {% endif %}
    {% if sensor.sensor_class == 'n' %}
    <a href="{% url 'PiApp.views.sensor_data_view' %}?sensor_id={{sensor.id}}"  style="float:right;">more here</a>
    <p><b>Name:</b>{{sensor.name}}</p>
    <div class="chart-responsive" style=""><div class="chart" id="revenue-chart-{{sensor.id}}" style="height: 250px;"></div></div>
    {% endif %}
    {% if sensor.sensor_class == 'p' %}
    <a href="{% url 'PiApp.views.sensor_data_view' %}?sensor_id={{sensor.id}}" style="float:right;">more here</a>
    <p><b>Name:</b>{{sensor.name}}</p>
    <div class="carousel slide" id="carousel-506941">
        <div sensor_id='{{sensor.id}}' class="carousel-inner">
        </div>
        <a class="left carousel-control" href="#carousel-506941" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="right carousel-control" href="#carousel-506941" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
    {% endif %}
</div>
{% endfor %}

{% endblock %}

<!-- <div class="col-md-6 col-md-offset-3"></div>   -->